<template>
    <n-space>
        <n-select
            placeholder="筛选班级"
            v-model:value="classId"
            :options="classIdOptions"
        />
        <n-select
            placeholder="筛选实训"
            v-model:value="trainingId"
            :options="trainingIdOptions"
        />
    </n-space>
    <n-data-table
        :columns="columns"
        :data="display"
        :bordered="false"
        children-key="noChildren"
    />
</template>

<script setup>
import workApi from "@/http/workApi";
import {useTeacherStore} from "@/stores/teacher";

const teacher = useTeacherStore()
const props = defineProps(['addBreadcrumbList', "setClass"])
const columns = [
    {
        title: "实训名称",
        key: "name"
    },
    {
        title: "班级名称",
        key: "training_class"
    },
    {
        title: "实训进展",
        key: "training_schedule"
    },
    {
        title: "完成情况",
        key: "completion",
        render(row) {
            return h(
                "span",
                {
                    strong: true,
                    tertiary: true,
                    size: "small",
                    onClick: () => openClass(row)
                },
                {default: () => row["completion"]}
            );
        }
    },
]

const dataRef = ref([])
const getScore = () => {
    /**
     * 获取成绩
     */
    workApi.get("teacher/training_score").then(r => {
        dataRef.value = r.data
        teacher.setAllGrade(r.data)
        trainingIdOptions.value = []
        classIdOptions.value = []

        let trainingIdOptionArray = [{label: "全部", value: null}]
        let classIdOptionArray = [{label: "全部", value: null}]
        for (let i of dataRef.value) {
            trainingIdOptionArray.push({label: i.name, value: i.id})
            classIdOptionArray.push({label: i.training_class, value: i.class_id})
        }
        // 转字符串 删除删除重复后转成数组
        trainingIdOptions.value = Array.from(new Set(trainingIdOptionArray.map(JSON.stringify)), JSON.parse);
        classIdOptions.value = Array.from(new Set(classIdOptionArray.map(JSON.stringify)), JSON.parse);
    })
}
getScore()


// 筛选  null为不筛选
const trainingId = ref(null)
const classId = ref(null)
const trainingIdOptions = ref([])
const classIdOptions = ref([])

const display = computed(() => {
    const array = []
    for (let i of dataRef.value) {
        let inclusion = 2
        if (trainingId.value === null || trainingId.value === i.id) {
            inclusion--
        }
        if (classId.value === null || classId.value === i.class_id) {
            inclusion--
        }
        if (inclusion === 0) {
            array.push(i)
        }
    }
    return array
})

const openClass = (row) => {
    props.addBreadcrumbList("班级成绩")
    props.setClass(row.id, row.class_id)
}
</script>

<style scoped lang="less">
.n-space {
    div {
        height: 50px;
        width: 200px;

    }
}
</style>